<template>
    <div class="view" v-show="status">
        <transition 
            name="fade"
            @afterLeave="afterLeave"
            >
            <div class="view__background" v-show="show"></div>
        </transition>
        <transition name="slider">
            <div class="view__container" v-if="show">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'ViewModal',
    data: function() {	
        return {
            status: false,
            show: false
        }
    },
    methods: {
        afterLeave (){
            this.status = false;
            this.$emit('update:modalState', false);
        }
    },
    computed: {
       
    },
    watch: {
          modalState (n, o) {
            this.show = n;
            if(n){
                this.status = n;
            }
          }  
    },
    props: ['modalState'],
    components: {}
}
</script>

<style lang="scss" scoped>
    .view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        &__background {
            height: 100%;
            background-color: rgba(0,0,0, .8);
        }
        &__container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            z-index: 100;
        }
    }
    .fade {
        &-enter {
            opacity: 0;
            &-active {
                transition: opacity .3s;
            }
            &-to {
                opacity: .3;
            }
        }
        &-leave {
                opacity: .3;
            &-active {
                transition: opacity .3s;
            }
            &-to {
                 opacity: 0;
            }
        }
    }
    .slider {
        &-enter {
           transform: translate3d(100%,0,0);
            &-active {
                 transition: transform .3s ease-in-out;
            }
            &-to {
                transform: translate3d(0,0,0);
            }
        }
        &-leave {
             transform: translate3d(0,0,0);
            &-active {
                 transition: transform .3s ease-in-out;
            }
            &-to {
                transform: translate3d(100%,0,0);
            }
        }
    }
</style>